<template>
    <div class="device">
        <div class="father">
            <div class="son" :class="tabIndex == index? 'active':''" v-for="(item,index) in 4" :key="index"
                @mouseover="changeTab(index)">
                {{item}}
            </div>
        </div>
        <div class="content">
            {{showContent()}}
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
let tabIndex = ref(0)
const changeTab = (index: number) => {
    console.log(index)
    tabIndex.value = index
}
const showContent = () => {
    const index = tabIndex.value
    if (index == 0) {
        return 1
    } else if (index == 1) {
        return 2
    } else if (index == 2) {
        return 3
    } else {
        return 4
    }
}

</script>
<style scoped lang='scss'>
.device {
    height: 100%;
    width: 100%
}

.father {
    width: 300px;
    height: 20px;
    display: flex;

    .son {
        flex: 1;
        border: 1px solid black;
    }
}

.active {
    background-color: red;
}
</style>